<template>
    <div id="app">

      <template>
        <Row style="background:#eee;padding:20px">
          <Col span="11">
            <Card :bordered="false">
<!--              <p>Using mustaches: {{ rawHtml }}</p>-->
              <p>Using v-text directive: <span v-text="rawHtml"></span></p>
              <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            </Card>
          </Col>
          <Col span="11" offset="2">
            <Card shadow>
              <p slot="title">Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：</p>
              <div v-bind:id="dynamicId">AAA</div>
            </Card>
          </Col>
        </Row>
      </template>

    </div>
</template>

<script>
    export default {
      data(){
        return {
          rawHtml: "<div>HELLO WORLD</div>",
          dynamicId: 1023
        }
      },
      created() {
      },
      methods:{

      }
    }
</script>

<style scoped>
#app{
  margin: 0 20px;
}
</style>
